<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>layer-weui测试</title>
    <link rel="stylesheet" href="css/base.css?v=4"/>
    <link rel="stylesheet" href="css/common.css?v=4"/>
    <style>
        html, body {

        }

        /**
        如果$('body')调用方法高度也一定要设置，如果不设置高度，只要滚动就会调用ajax，因为这是container.scrollHeight()和container.height()相等
        overflow设不设置一样，都可以
        页面内部div不能设置固定高度和滚动，否则可能滚动无效
        */
        body {
            height: 100vh;
            /*overflow: auto;*/
        }

        .page {
            flex-direction: column;
            height: 100vh;
            text-align: left;
        }

        .other {
            border-bottom: 1px solid #f3f3f3;
        }

        .infinite {
            overflow: scroll;
        }


        .order-list  {
            overflow: scroll;
        }

        .order-list .order-items {
            border-bottom: 1px solid #f3f3f3;
            color: #565656;
            position: relative;
            padding: 10px 15px;
        }

        .order-list .order-items .item {
            padding: 1px 0;
        }

        .order-list .order-items .tt {

        }

        .order-list .order-items .paymoney {

        }

        .order-list .order-items .go-detail {
            border-radius: 15px;
            bottom: 18px;
            font-size: 12px;
            right: 15px;
            position: absolute;
        }

        .weui-loadmore {
            text-align: center;
        }

        .weui-infinite-scroll {
            height: 24px;
            line-height: 24px;
            padding: 10px;
            text-align: center;
        }

        .weui-infinite-scroll .infinite-preloader {
            display: inline-block;
            margin-right: 4px;
            vertical-align: -4px;
            width: 20px;
            height: 20px;
            -webkit-transform-origin: 50%;
            transform-origin: 50%;
            -webkit-animation: preloader-spin 1s steps(12, end) infinite;
            animation: preloader-spin 1s steps(12, end) infinite;
        }

        .weui-infinite-scroll .infinite-preloader:after {
            display: block;
            width: 100%;
            height: 100%;
            content: "";
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 100%;
        }

        @-webkit-keyframes preloader-spin {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes preloader-spin {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
    <script src="https://www.web000.cn/layer.min.js"></script>
</head>
<body>
<div class="page flex-box">
    <div>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus
        quis nibh hendreritQuisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus
        quis nibh hendreritQuisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus
        quis nibh hendrerit
    </div>
    <div class="order-list flex1">
        <div class='content-padded' id="order-view">
            <template>
                <p class="item"><span class="tt">订单编号：</span>32021051816475699</p>
                <p class="item"><span class="tt">消费时间：</span>2021-05-14 09:23:41</p>
                <p class="item"><span class="tt">消费金额：</span><span class="din warning paymoney">4</span>点
                </p>
                <span class="go-detail btn btn-warn-bd btn-mini" data-orderno="32021051816475699">查看详情</span>
            </template>
        </div>
        <div class="weui-loadmore hide">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div>
</div>
<script>
    $$('#order-view').listview({
        "url":"http://rap2api.taobao.org/app/mock/278020/example/orderlist",
        "classWrapper": "listviews",
        "classItem": "order-items",
        "isScrollPage":true,
        "scrollDom":'.order-list',
        "isPulltorefresh":false,
        "pulltorefreshDom":null,
        "empty":false,
        "keyEach": 'List',
        "itemTap": function (listitem, dataitem, datasource, event) {
            console.log(listitem)
            console.log(dataitem)
            console.log(datasource)
            console.log(event)
        },
        "loadsuccess":function (data){

        }
    });
</script>
<script>
    // function getPosOrderList(str) {
    //     $.ajax({
    //         'type': 'get',
    //         'url': 'http://rap2api.taobao.org/app/mock/278020/example/orderlist',
    //         'data': {
    //             Source: 'ldfl_pos',
    //             StartDate: '2021-05-01',
    //             EndDate: '2021-05-18',
    //             PosID: 'VS32199E60834',
    //             OrderNo: '',
    //             PageIndex: pageIndex,
    //             PageSize: pageSize,
    //             VerifyInfo: 'F1AA808685E9B4962CBCBD636F8CD81C',
    //         },
    //         'success': function (data) {
    //             if (data.ResultCode == "0") {
    //                 var totalList = data.Total //总记录数
    //                 var totalPage = Math.ceil(totalList / pageSize);
    //                 if (totalPage > pageIndex + 1) {
    //                     $(".weui-loadmore").removeClass("hide");
    //                 } else {
    //                     $(".infinite").destroyInfinite();
    //                     $(".weui-loadmore").addClass("hide");
    //                 }
    //
    //                 var htmlTotal = '共计：<span class="din warning">' + data.Total + '</span>笔订单，消费总金额：<span class="din warning">' + data.Append + '</span>点';
    //                 $('.total').html(htmlTotal);
    //
    //                 var html = '';
    //                 var dataOrder = isNull(data.List) ? [] : data.List;
    //                 if (dataOrder.length > 0) {
    //                     for (var i = 0; i < dataOrder.length; i++) {
    //                         html += '<div class="order-items" data-orderNo="' + dataOrder[i].OrderNo + '" >';
    //                         html += '<p class="item"><span class="tt">订单编号：</span>' + dataOrder[i].OrderNo + '</p>';
    //                         html += '<p class="item"><span class="tt">消费时间：</span>' + dataOrder[i].CreateDate + '</p>';
    //                         html += '<p class="item"><span class="tt">消费金额：</span><span class="din warning paymoney">' + dataOrder[i].PayMoney + '</span>点</p>';
    //                         // html += '<p class="item"><span class="tt">结算金额：</span><span class="din warning">' + dataOrder[i].SettleMoney + '</span>点</p>';
    //                         html += '<span class="go-detail btn btn-warn-bd btn-mini" data-orderNo="' + dataOrder[i].OrderNo + '">查看详情</span>';
    //                         html += '</div>';
    //                     }
    //                 } else {
    //                     if (pageIndex == 0) {
    //                         html += '<p class="error">暂无订单数据</P>';
    //                     }
    //                 }
    //
    //                 $(".order-list .content-padded").append(html);
    //
    //                 $('.order-list').on('click', '.order-list li .go-detail', function () {
    //                     var _self = $(this);
    //                     var orderNo = _self.attr('data-orderNo');
    //                     window.location.href = 'orderDetail.html?orderNo=' + orderNo;
    //                 })
    //
    //                 pageIndex++;
    //
    //                 if (str == 'calback') {
    //                     $(".infinite").infinite();
    //                 }
    //             } else {
    //                 alert(data.ErrMsg);
    //             }
    //         },
    //         'error':function (){
    //             alert(1)
    //         },
    //         'complete': function () {
    //             loading = false;
    //         }
    //     })
    // }
    //
    // var pageIndex = 1;
    // var pageSize = 10;
    // getPosOrderList();
    //
    // var loading = false;
    // $("body").infinite().on("infinite", function () {
    //     if (loading) return;
    //     loading = true;
    //     getPosOrderList();
    // });
</script>
</body>
</html>
